<template>
  <a-modal
    :title="currTitle"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="closable">
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="departOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{span:4}"
        :wrapperCol="{span:20}"
        style="margin-bottom:10px"
        :validate-status="validate_status">
        <a-tooltip placement="topLeft" >
          <template slot="title">
            <span>您隶属于多部门，请选择当前所在部门</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>
        <a-select v-model="departSelected" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option
            v-for="d in departList"
            :key="d.id"
            :value="d.orgCode">
            {{ d.departName }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>


  </a-modal>

</template>

<script>
  import { getAction, putAction } from '@/api/manage'
  import Vue from 'vue'
  import store from '@/store/'
  import { USER_INFO } from '@/store/mutation-types'

  export default {
    name: 'DepartSelect',
    props: {
      title: {
        type: String,
        default: '部门选择',
        required: false
      },
      closable: {
        type: Boolean,
        default: false,
        required: false
      },
      username: {
        type: String,
        default: '',
        required: false
      }
    },
    watch: {
      username(val) {
        if (val) {
          this.loadDepartList()
        }
      }
    },
    data() {
      return {
        currTitle: this.title,
        visible: false,
        departList: [],
        departSelected: '',
        validate_status: '',
        currDepartName: ''
      }
    },
    created() {
      // this.loadDepartList()
    },
    methods: {
      loadDepartList() {
        return new Promise(resolve => {
          let url = '/sys/user/getCurrentUserDeparts'
          this.currDepartName = ''
          getAction(url).then(res => {
            if (res.success) {
              let departs = res.result.list
              let orgCode = res.result.orgCode
              if (departs && departs.length > 0) {
                for (let i of departs) {
                  if (i.orgCode == orgCode) {
                    this.currDepartName = i.departName
                    break
                  }
                }
              }
              this.departSelected = orgCode
              this.departList = departs
              if (this.currDepartName) {
                this.currTitle = '部门切换（当前部门 : ' + this.currDepartName + '）'
              }
            }
            resolve()
          })
        })
      },
      close() {
        this.departClear()
      },
      departOk() {
        if (!this.departSelected) {
          this.validate_status = 'error'
          return false
        }
        let obj = {
          orgCode: this.departSelected,
          username: this.username
        }
        putAction('/sys/selectDepart', obj).then(res => {
          if (res.success) {
            const userInfo = res.result.userInfo
            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
            store.commit('SET_INFO', userInfo)
            // console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
            this.departClear()
          }
        })
      },
      show() {
        // 如果组件传值username此处就不用loadDepartList了
        this.loadDepartList().then(() => {
          this.visible = true
          if (!this.departList || this.departList.length <= 0) {
            this.$message.warning('您尚未设置部门信息!')
            this.departClear()
          }
        })
      },
      departClear() {
        this.departList = []
        this.departSelected = ''
        this.visible = false
        this.validate_status = ''
        this.currDepartName = ''
      }
    }

  }
</script>
<style scoped>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>
